<template>
	<view class="mask" @click="closeMask">
		<view class="login_modal" v-if="!isButtonSignal">
			<view class="login_modal_title" v-if="inviteTitle">{{inviteTitle}}</view>
			<view class="login_modal_content">{{inviteTips}}</view>
			<!-- <view class="login_modal_btn" >
				<view @tap.stop="closeUserMask">{{button[0].text}}</view>
				<view hover-class="modal-active" @tap.stop="getUserProfile">{{button[1].text}}</view>
			</view> -->
			<view class="login_modal_btn" >
				<view @tap.stop="modalMed(buttonLeft)">{{buttonLeft}}</view>
				<view hover-class="modal-active" @tap.stop="modalMed(buttonRight)">{{buttonRight}}</view>
			</view>
		</view>

		<view class="tips-modal" v-else>
			<view class="login_modal_title" v-if="inviteTitle">{{inviteTitle}}</view>
			<view class="content">{{inviteTips}}</view>
			<view class="button" hover-class="modal-active" @tap.stop="jumpPage(buttonMed)">{{buttonText}}</view>
		</view>
	</view>
</template>

<script>
var app = getApp();
export default { 
    components: {
        'name': 'tip-modal'
    },
	props:{
		inviteTips:String,
		buttonRight:String,
		buttonLeft:String,
		isButtonSignal:Boolean,
		inviteTitle:String,
		buttonText:String,
		buttonMed:String
	},
    data() {
        return {
			button :[
				{
					text:'取消登录'
				},
				{
					text:"立即登录"
				}
			],
			buttonSignal:{
				text:'去首页',
				method:'JumpHome'
			}
        };
    },
    onLoad() {},
    methods: {
		closeUserMask(){
			this.$emit('closeLoginFlag',false);
		},
		closeMask(){
			this.$emit('closeMask',false);
		},
		modalMed(text){
			this.$emit('modaBtnlMethods',text);
		},
		jumpPage(page){
			switch(page){
				case 'register':
					// uni.redirectTo({
					// 	// url:'/pages/register/register',
					// 	url:'/pages/memberCenter/memberCenter',
					// })
					
					// #ifdef MP-WEIXIN
						uni.redirectTo({
							url:'/pages/memberCenter/memberCenter'
						})
					// #endif
					// #ifdef MP-TOUTIAO
						uni.redirectTo({
							url:'/pages/register/register'
						})
					// #endif
					// uni.navigateTo({
					// 	url:'/pages/register/register'
					// })
				break;
				
				case 'index':
					uni.switchTab({
						url:'/pages/index/index'
					})
				break;
				default:
					
				break;
			}
		},
		getUserProfile(){
			this.$emit('isInviteMed',true);
		},
        selectIcon(index) {
			let that =this;
				switch(index) {
					case 0:
						uni.switchTab({
							url:'/pages/index/index'
						})
						
						// 分享
					break;
					case 1:
						uni.switchTab({
							url:'/pages/mine/mine'
						})
					break;
				}
		},
        onGetPhoneNumber(e){
        	app.GetMobile(e,function(e){
        		uni.switchTab({
        			url:'/pages/mine/mine'
        		})
        	});
        },
    }
};
</script>

<style scoped lang="scss">
	.mask {
		background: rgba(0, 0, 0, 0.5);
		position: fixed;
		width: 100vw;height: 100vh;
		top: 0;left:0;
		z-index: 9;
		
		.login_modal,.tips-modal{
			background-color: #FFFFFF;
			padding: 60rpx 50rpx;
			position: absolute;
			top: 50%;left: 65rpx;
			margin-top: -300rpx;
			color: #333;
			width: 520rpx;
			background: #FFFFFF;
			border-radius: 12px;
			text-align: center;
			
			.login_modal_title {
				font-size: 44rpx;
				font-weight: bold;
				color: #333333;
				line-height: 62rpx;
				margin-bottom: 23rpx;
			}
			
			.login_modal_content {
				font-size: 32rpx;
				margin: 0 auto;
				width: 400rpx;
				color: #333333;
				line-height: 45rpx;
			}
			
			.login_modal_btn {
				display: flex;
				margin-top: 68rpx;
				justify-content: space-around;
				font-size: 28rpx;
				font-weight: bold;
				color: #333333;
				line-height: 90rpx;
				
				view {
					width: 240rpx;
					height: 90rpx;
					background: #EFEFEF;
					border-radius: 16rpx;
				}
				
				view:nth-child(2){
					background: #FA6400;
				}
			}
		}
		
		.tips-modal{
			text-align: center;
			
			.content {
				width: 374rpx;
				font-size: 28rpx;
				font-weight: bold;
				color: #21212A;
				line-height: 40rpx;
				margin: 0 auto;
			}
			
			.button {
				width: 240rpx;
				height: 80rpx;
				background: #FA6400;
				text-align: center;
				font-size: 28rpx;
				font-weight: bold;
				color: #21212A;
				line-height: 80rpx;
				border-radius: 40rpx;
				margin:0 auto;
				margin-top: 60rpx;
			}
			.modal-active {
				background: rgba(247, 181, 0, 0.8);
			}
		}
	}

</style>